<template>
  <h1>Welcome to my app</h1>

  <div>
    <el-input v-model="query.user_input" placeholder="Enter your query" @keyup.enter="search"/>
  </div>
  <div v-for="(item, index) in result_data" :key="index">
    {{item}}
  </div>
</template>
<script setup>
import {ref} from "vue";
import axios from "axios";


const search = () => {
  // console.log(query.value.user_input)
  axios.post(`http://localhost:8000/app/tools/`, {user_input: query.value.user_input})
      .then(res => {
        console.log(res.data)
        result_data.value.push('用户：'+res.data.data.input+'\n')
        result_data.value.push('AI：'+res.data.data.output+'\n')
      })
}
const result_data = ref([])
const query = ref({
  user_input: '',
  result: '',
})

</script>